<template>
	<view class="message-container">
		<view v-for="f in friends" :key="f.uid" class="item" @click="goDetail(f)">
			<view class="avatar">
				<image :src="f.avatar || defaultAvatar" mode="aspectFill"></image>
<!--				<image v-if="f.gender == 1" mode="aspectFill" class="like-icon" src="/static/image/man-color.png"></image>-->
<!--				<image v-else mode="aspectFill" class="like-icon" src="/static/image/woman-color.png"></image>-->
			</view>
			<view class="info" :class="f.unread ? 'shake' : ''">
				<text class="username">{{ f.userName }}</text>
				<text class="msg">{{ f.unread ? '有新消息' : '' }}</text>
			</view>
		</view>
		<my-tabbar :active="3"></my-tabbar>
	</view>
</template>

<script setup lang="ts">
import {ref, inject} from 'vue'
import {onLoad, onPullDownRefresh, onShow} from '@dcloudio/uni-app';
import request from '@/utils/request.js';
import {handleUrl} from '@/utils/handleUrl.js';
import myNavbar from "@/components/my-navbar/my-navbar.vue";

const $store = inject('$store')
const defaultAvatar = '/static/image/base.png'
const userInfo = ref({})
const friends = ref([])
let myId = ref('')

onPullDownRefresh(() => {
	getFriends()
	getUnread()
	setTimeout(() => {
		uni.stopPullDownRefresh()
	}, 1000)
})

onShow(() => {
	// getMsg()
	console.log('message页面显示', friends.value)
	getUnread()
})

function getUnread() {
	let unreadList = uni.getStorageSync('msgUserIdList') || []
	// 给有新消息的好友添加标记
	friends.value.forEach((item) => {
		if (unreadList.includes(item.uid)) {
			item.unread = true
		}
	})
}

onLoad(() => {
	myId.value = uni.getStorageSync('uid') // 我的id
	getUserInfo()
	getFriends()
	let websocket = $store.state.socket
	console.log('message-----------', websocket);
	// 监听socket的message事件
	uni.onSocketMessage(function (res) {
		console.log('message收到内容：' + res.data);
		getMsg()
	});
	
});

function getMsg() {
	request.post('messageRecord/getMessage', {
		sendUserId: 6290,
		receiveUserId: myId.value,
	}).then(res => {
		console.log('message获取消息', res)
		let count = uni.getStorageSync('msgCount') || 0
		let diff = res.result.length - Number(count) // 新消息数量
		
		if (res.result.length > count) {
			console.log('_——————————————有新消息')
			uni.setTabBarBadge({
				index: 2,
				text: diff.toString()
			})
		}
	})
}

function getFriends() {
	request.get('guest/recommend/history').then(res => {
		res.result.forEach((item) => {
			item.avatar = handleUrl(item.avatar)
		})
		friends.value = res.result
	})
}

function goDetail(f) {
	// 去除当前好友的未读标记
	f.unread = false
	let unreadList = uni.getStorageSync('msgUserIdList') || []
	let index = unreadList.indexOf(f.uid)
	if (index > -1) {
		unreadList.splice(index, 1)
	}
	uni.setStorageSync('msgUserIdList', unreadList)
	// 如果没有未读消息，隐藏红点
	if (unreadList.length == 0) {
		uni.removeTabBarBadge({
			index: 2
		})
	}
	// console.log('对方',f)
	uni.setStorageSync("theirAvatar", f.avatar);
	uni.navigateTo({
		url: `/pages/message/detail?receiveUser=${f.userName}&sendOutUser=${userInfo.value.userName}&uid=${f.uid}`
	})
}

const getUserInfo = () => {
	request.get("user/userInfo").then(res => {
		userInfo.value = res.result;
		uni.setStorageSync("myAvatar", handleUrl(res.result.avatar));
	})
}
</script>


<style scoped lang="scss">
@import "/static/css/theme.scss";
.message-container{
	padding-top: 120rpx;
}

.item {
	display: flex;
	padding: 20rpx;
	width: 90%;
	margin: 0 auto;
	border-bottom: 1rpx solid $lv-wyy-red;
	&:last-child {
		border-bottom: none;
	}
	
	.avatar {
		position: relative;
		margin-right: 20px;
		
		//.like-icon {
		//	position: absolute;
		//	right: 0;
		//	bottom: 0;
		//	width: 30rpx;
		//	height: 30rpx;
		//	transform: rotate(-45deg);
		//}
		
		image {
			border-radius: 50%;
			width: 100rpx;
			height: 100rpx;
			border: 1rpx solid $lv-wyy-red;
			box-sizing: border-box;
		}
	}
	
	.info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		
		.username {
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
		}
		
		.msg {
			font-size: 28rpx;
			color: #f00;
		}
	}
	
	.shake {
		animation: shake 0.5s infinite;
	}
	
	@keyframes shake {
		0% {
			transform: rotate(-5deg);
		}
		50% {
			transform: rotate(5deg);
		}
		100% {
			transform: rotate(-5deg);
		}
	}
}
</style>
